@charset "UTF-8";
body, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, select, textarea, button, th, td, menu {
  margin: 0;
  padding: 0; }

* {
  box-sizing: border-box; }

ul, dl, ol {
  list-style: none; }

img, fieldset, input[type="submit"] {
  border: 0 none; }

em {
  font-style: normal; }

strong {
  font-weight: normal; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

button, input[type="button"] {
  cursor: pointer;
  border: 0 none; }

a, button, input, img {
  -webkit-touch-callout: none; }

img {
  /*pointer-events:none;*/
  /*禁止图片的点击事件，例如长按保存图片*/ }

input, select, textarea {
  outline: none; }

a {
  text-decoration: none; }

.fl {
  float: left; }

.fr {
  float: right; }

.clear {
  clear: both; }

.clearfix:after {
  content: "";
  display: block;
  clear: both; }

html, body {
  /*禁止用户选择元素*/
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  /*禁止元素点击出现半透明黑色背景*/
  -webkit-tap-highlight-color: transparent; }

html {
  height: 100%;
  width: 100%;
  font-family: "黑体","Source Han Sans","Helvetica Neue", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", "sans-serif";
  outline: 0;
  -webkit-text-size-adjust: none; }

body {
  height: 100%;
  margin: 0;
  position: relative; }

@font-face {
  font-family: "iconfont";
  src: url("../fonts/iconfont.eot?t=1521034151322");
  /* IE9*/
  src: url("../fonts/iconfont.eot?t=1521034151322#iefix") format("embedded-opentype"), url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff"), url("../fonts/iconfont.ttf?t=1521034151322") format("truetype"), url("../fonts/iconfont.svg?t=1521034151322#iconfont") format("svg");
  /* iOS 4.1- */ }

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-play2:before {
  content: "\e801"; }

.icon-fangdajing:before {
  content: "\e6e4"; }

.icon-erji:before {
  content: "\e63f"; }

body {
  background: #fff; }

.web {
  width: 100%; }
  .web header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    background: #31c27c; }
    .web header .logo {
      margin-left: 2%;
      width: 28%;
      height: 45%;
      font-size: 0; }
      .web header .logo .logo_img {
        display: inline-block;
        width: 25%;
        margin-right: 2%; }
        .web header .logo .logo_img img {
          width: 100%;
          vertical-align: middle; }
      .web header .logo span {
        display: inline-block;
        vertical-align: middle;
        color: #fff;
        font-size: 16px; }
    .web header .download {
      width: 25%;
      height: 63%;
      border-radius: 99px;
      font-size: 14px;
      background: #149c5a;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 2%; }
      .web header .download a {
        color: #fff; }
  .web section .nav {
    background: #fff; }
    .web section .nav ul {
      display: flex;
      justify-content: space-around;
      align-items: center; }
      .web section .nav ul li {
        width: 33.3%;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.6); }
      .web section .nav ul .active {
        color: #31c27c;
        border-bottom: 1px solid #31C27C; }
  .web section .cont_wrap .content_box {
    background: #f4f4f4; }
    .web section .cont_wrap .content_box .swiper-container {
      width: 100%; }
      .web section .cont_wrap .content_box .swiper-container img {
        width: 100%; }
      .web section .cont_wrap .content_box .swiper-container .swiper-pagination-bullet {
        width: 5px;
        height: 5px;
        display: inline-block;
        border-radius: 100%;
        background: #000;
        opacity: .5; }
      .web section .cont_wrap .content_box .swiper-container .swiper-pagination-bullet-active {
        opacity: 1;
        background: #fff; }
    .web section .cont_wrap .content_box .station_box {
      margin-top: 4%;
      margin-left: 3%;
      margin-right: 3%; }
      .web section .cont_wrap .content_box .station_box .station_title {
        font-size: 16px;
        color: #000;
        margin-bottom: 4%;
        font-weight: normal; }
      .web section .cont_wrap .content_box .station_box .station_ul {
        margin-right: -3%;
        display: flex;
        justify-content: space-between;
        align-items: center; }
        .web section .cont_wrap .content_box .station_box .station_ul li {
          width: 50%;
          padding-right: 4%; }
          .web section .cont_wrap .content_box .station_box .station_ul li .list_img {
            width: 100%;
            margin-right: -4%;
            position: relative; }
            .web section .cont_wrap .content_box .station_box .station_ul li .list_img img {
              width: 100%; }
            .web section .cont_wrap .content_box .station_box .station_ul li .list_img i {
              position: absolute;
              bottom: 8%;
              right: 8%;
              font-size: 24px;
              color: #fff; }
          .web section .cont_wrap .content_box .station_box .station_ul li .list_con {
            color: #555;
            background: #fff; }
            .web section .cont_wrap .content_box .station_box .station_ul li .list_con p {
              height: 36px;
              line-height: 18px;
              white-space: normal;
              word-wrap: break-word;
              padding: 0 7px 5px; }
    .web section .cont_wrap .content_box .Popular_song {
      margin-top: 4%;
      margin-left: 3%;
      margin-right: 3%; }
      .web section .cont_wrap .content_box .Popular_song .Popular_song_title {
        font-size: 16px;
        color: #000;
        margin-bottom: 11px;
        font-weight: normal; }
      .web section .cont_wrap .content_box .Popular_song .Popular_song_ul {
        margin-right: -3%; }
        .web section .cont_wrap .content_box .Popular_song .Popular_song_ul li {
          width: 50%;
          padding-right: 4%;
          float: left;
          line-height: 18px; }
          .web section .cont_wrap .content_box .Popular_song .Popular_song_ul li .song_img {
            width: 100%;
            margin-right: -4%;
            position: relative; }
            .web section .cont_wrap .content_box .Popular_song .Popular_song_ul li .song_img img {
              width: 100%; }
            .web section .cont_wrap .content_box .Popular_song .Popular_song_ul li .song_img .icon-play2 {
              position: absolute;
              bottom: 8%;
              right: 8%;
              font-size: 24px;
              color: #fff; }
            .web section .cont_wrap .content_box .Popular_song .Popular_song_ul li .song_img span {
              position: absolute;
              bottom: 8%;
              left: 4%;
              font-size: 12px;
              color: #fff;
              vertical-align: middle;
              white-space: nowrap; }
              .web section .cont_wrap .content_box .Popular_song .Popular_song_ul li .song_img span .icon-erji {
                font-size: 12px;
                color: #fff;
                margin-right: 7%; }
          .web section .cont_wrap .content_box .Popular_song .Popular_song_ul li .song_con {
            font-size: 12px;
            padding: 4% 3%;
            color: #000; }
            .web section .cont_wrap .content_box .Popular_song .Popular_song_ul li .song_con .song_title {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              color: #555;
              font-size: 12px; }
            .web section .cont_wrap .content_box .Popular_song .Popular_song_ul li .song_con .song_con p {
              margin-bottom: 5px; }
      .web section .cont_wrap .content_box .Popular_song .list_most {
        display: block;
        height: 40px;
        line-height: 40px;
        text-align: center; }
        .web section .cont_wrap .content_box .Popular_song .list_most a {
          display: inline-block;
          padding: 0 10px;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.6); }
    .web section .cont_wrap .content_box .footer {
      padding: 15px 0; }
      .web section .cont_wrap .content_box .footer .version_tab {
        text-align: center;
        margin-bottom: 5%; }
        .web section .cont_wrap .content_box .footer .version_tab a {
          position: relative;
          padding: 0 15px;
          font-size: 14px;
          height: 14px;
          line-height: 14px;
          color: #000; }
      .web section .cont_wrap .content_box .footer .footer_logo {
        text-align: center;
        font-size: 0;
        margin-bottom: 2%; }
        .web section .cont_wrap .content_box .footer .footer_logo .logo_img {
          width: 10%;
          margin-right: 2%;
          display: inline-block; }
          .web section .cont_wrap .content_box .footer .footer_logo .logo_img img {
            width: 100%;
            vertical-align: middle; }
        .web section .cont_wrap .content_box .footer .footer_logo span {
          display: inline-block;
          vertical-align: middle;
          font-size: 20px; }
      .web section .cont_wrap .content_box .footer .copyright {
        font-size: 12px;
        text-align: center;
        color: rgba(0, 0, 0, 0.5); }
  .web section .cont_wrap .ranking_box {
    padding: 10px;
    background: #f4f4f4; }
    .web section .cont_wrap .ranking_box .ranking_list {
      width: 95%;
      margin: 0 auto; }
      .web section .cont_wrap .ranking_box .ranking_list li {
        margin-bottom: 3%;
        overflow: hidden;
        background: #fff; }
        .web section .cont_wrap .ranking_box .ranking_list li .ranking_main {
          display: flex;
          justify-content: space-between;
          align-items: center; }
          .web section .cont_wrap .ranking_box .ranking_list li .ranking_main .main_img {
            width: 33%;
            position: relative;
            color: #fff;
            font-size: 0; }
            .web section .cont_wrap .ranking_box .ranking_list li .ranking_main .main_img img {
              width: 100%; }
            .web section .cont_wrap .ranking_box .ranking_list li .ranking_main .main_img span {
              position: absolute;
              bottom: 2%;
              left: 3%;
              font-size: 12px;
              color: #fff;
              opacity: .6; }
          .web section .cont_wrap .ranking_box .ranking_list li .ranking_main .main_con {
            width: 60%; }
            .web section .cont_wrap .ranking_box .ranking_list li .ranking_main .main_con h3 {
              font-size: 16px;
              margin-bottom: 4%;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              color: #000; }
            .web section .cont_wrap .ranking_box .ranking_list li .ranking_main .main_con p {
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              font-size: 14px;
              color: rgba(0, 0, 0, 0.5);
              margin-bottom: 5px; }
              .web section .cont_wrap .ranking_box .ranking_list li .ranking_main .main_con p span {
                color: #000; }
          .web section .cont_wrap .ranking_box .ranking_list li .ranking_main .arrow {
            font-size: 16px;
            color: rgba(0, 0, 0, 0.5); }
  .web section .cont_wrap .seek_box .search_box {
    background: #F4F4F4;
    padding: 10px; }
    .web section .cont_wrap .seek_box .search_box .search_con {
      width: 94%;
      margin: 0 auto;
      background: #fff;
      padding: 3% 2%; }
      .web section .cont_wrap .seek_box .search_box .search_con i {
        font-size: 24px;
        vertical-align: middle; }
      .web section .cont_wrap .seek_box .search_box .search_con input {
        border: none;
        vertical-align: middle;
        font-size: 16px; }
  .web section .cont_wrap .seek_box .tags {
    padding: 15px 10px;
    height: 255px;
    overflow: hidden; }
    .web section .cont_wrap .seek_box .tags h3 {
      color: rgba(0, 0, 0, 0.6);
      margin-bottom: 8px; }
    .web section .cont_wrap .seek_box .tags .tags_list {
      border: 1px solid rgba(0, 0, 0, 0.6);
      border-radius: 99px;
      display: inline-block;
      line-height: 30px;
      margin-bottom: 3%;
      margin-right: 5%;
      padding: 0 3%; }
      .web section .cont_wrap .seek_box .tags .tags_list a {
        color: #000; }
    .web section .cont_wrap .seek_box .tags .change {
      border-color: #fc4524; }
      .web section .cont_wrap .seek_box .tags .change a {
        color: #fc4524; }
  .web section .cont_wrap .content_box, .web section .cont_wrap .ranking_box, .web section .cont_wrap .seek_box {
    display: none; }
  .web section .cont_wrap .block {
    display: block; }
